<template>
    <div class="weekend_container">

        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>周末去哪管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="weekend_card">

            <!-- title -->
            <el-row class="title">
                <el-col>闪购列表</el-col>
                <el-col class="inner">
                    <el-button @click="add_weekend" type="primary">添加周末去哪</el-button>
                </el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="weekend_content">
                <el-row class="filter_box">
                    <el-col :span='9'>
                        <span>产品名称：</span>
                        <el-input size="medium" style="width: 70%;" v-model="name" placeholder="请输入内容（名称、编码）"></el-input>
                    </el-col>
                    <el-col :span='6'>
                        <span>添加时间：</span>
                        <el-date-picker size="medium" style="width: 70%;" v-model="date" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span='3'>
                        <el-button size="medium" type="primary" @click="searchList()">
                            <span style="color: #FFFFFF">筛选</span>
                        </el-button>
                    </el-col>
                </el-row>

                <!-- tab选项 -->
                <el-row class="xcx-tabs">
                    <el-col :span="24">
                        <el-button type="text" :class="(type === 1) ? '': 'disable'" @click="checkType(1)">全部
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 2) ? '': 'disable'" @click="checkType(2)">已上线
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 3) ? '': 'disable'" @click="checkType(3)">已下线
                        </el-button>
                    </el-col>
                </el-row>

                <!-- 表格 -->
                <el-table class="weekend_table" :data="tableData.slice((page-1)*limit,page*limit)" style="width: 100%" border>
                    <el-table-column prop="status" label="名称" width="500">
                        <div class="detail_box" slot-scope="scope">
                            <div class="detail">
                                <div class="img_box">
                                    <img :src="scope.row.img" alt="">
                                </div>
                                <!-- 详情 -->
                                <div class="detail_right">
                                    <div class="item color1" style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical">{{ scope.row.text }}</div>
                                    <div class="item color2">起步价：{{ scope.row.prcie }}</div>
                                    <!--<div class="item sb_jc color3">-->
                                    <!--<span>库存：{{ scope.row.inventory }}</span>-->
                                    <!--<span>编号：{{ scope.row.number }}</span>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </el-table-column>
                    <el-table-column prop="stage" sortable label="期数">
                    </el-table-column>
                    <el-table-column prop="sn" label="编码">
                    </el-table-column>

                    <el-table-column prop="add_time" label="添加时间">
                    </el-table-column>

                    <el-table-column prop="status" label="状态">
                    </el-table-column>
                    <el-table-column label="是否录完">
                        <template slot-scope="scope">
                            <div v-html="scope.row.end_text"></div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <div class="do_soming" slot-scope="scope">
                            <!--<div class="preview">预览</div>-->
                            <div class="preview" @click="edit(scope.row.id)">修改</div>
                            <div class="down_line" style="cursor: pointer" @click="delGoods(scope.row.id)">删除</div>
                            <!--<div class="Go_online" style="cursor: pointer" @click="onLine(scope.row.id,scope.row.is_end)" v-if="scope.row.is_submit ===2">上线</div>-->
                        </div>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total, prev, pager, next" :total="count">
            </el-pagination>
        </el-card>
    </div>
</template>

<script src='../../../static/js/weekend/weekend_list.js'></script>

<style scoped>
@import "../../../static/css/weekend/weekend_list.css";
</style>



